<template>
    <div class="contract-detial-page contract-inquiry-detial">
        <rui-page :defines="defines">
            <Collapse v-model="openPanel">
                <Panel name="1">
                    合同信息
                    <div class="content" slot="content">
                        <ContractInfo ref="contractInfo" :contractNo="contractNo"
                                      @anchorInfoModalOpen="anchorInfoModalOpen" :dataDict="dataDict"/>
                    </div>
                </Panel>
                <Panel name="2">
                    客户信息
                    <div class="content" slot="content">
                        <CustomerInfo ref="custInfo" :contractNo="contractNo" :dataDict="dataDict" dispalyType="table"/>
                    </div>
                </Panel>
                <!--                <Panel name="3">-->
                <!--                    业务合作伙伴-->
                <!--                    <div class="content" slot="content">-->
                <!--                        <BusinessPartner ref="channelInfo" :contractNo="contractNo" :dataDict="dataDict"/>-->
                <!--                    </div>-->
                <!--                </Panel>-->

                <Panel name="4">
                    财务信息
                    <div class="content" slot="content">
                        <FinancialInfo ref="financeInfo" :contractNo="contractNo"/>
                    </div>
                </Panel>
                <Panel name="5">
                    租金明细
                    <div class="content" slot="content">
                        <RentDetails ref="rentInfo" :contractNo="contractNo"/>
                    </div>
                </Panel>
                <Panel name="6">
                    资产明细
                    <div class="content" slot="content">
                        <AssetDetails ref="assetsInfo" :contractNo="contractNo"/>
                    </div>
                </Panel>
                <!--                <Panel name="7">-->
                <!--                    <span>挂靠信息</span>-->
                <!--                    <span class="more">{{ affiliatedInfoType }}</span>-->
                <!--                    <div class="content" slot="content">-->
                <!--                        <AnchorInfo ref="affiliatedInfo" :contractNo="contractNo" :dataDict="dataDict"/>-->
                <!--                    </div>-->
                <!--                </Panel>-->
            </Collapse>
        </rui-page>
        <div style="height: 60px"></div>
        <Affix :offset-bottom="0">
            <div style="background-color: #fff">
                <div class="contract-detial-btns">
                    <Button type="primary" @click="toCurrentPeriod">当期</Button>
                    <Button type="primary" @click="openReceivablesModal">应收</Button>
                    <Button type="primary" @click="toCollectMoney">收款</Button>
                    <Button type="primary" @click="toRepaymentSchedule">还款计划表</Button>
                    <Button type="primary" @click="toLog">查看日志</Button>
                </div>
                <div class="contract-detial-btns">
                    <Button type="primary" @click="openNewTab('penalty-exempt-list')">豁免罚息</Button>
                    <!--                <Button type="primary">创建费用</Button>-->
                    <Button type="primary" @click="openNewTab('cost-exempt-list')">豁免费用</Button>
                    <Button type="primary" @click="openNewTab('apply')">提前结清</Button>
                    <Dropdown @on-click="openNewTab">
                        <Button type="primary">
                            变更
                            <Icon type="ios-arrow-down"></Icon>
                        </Button>
                        <DropdownMenu slot="list">
                            <DropdownItem name="change-identity-list">身份信息</DropdownItem>
                            <DropdownItem name="change-contact-list">联系方式</DropdownItem>
                            <DropdownItem name="change-bank-card-list">银行卡</DropdownItem>
                            <DropdownItem name="change-repayment-date-list">还款日</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </div>
        </Affix>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <!-- <Modal v-model="receivablesModal" title="应收" ></Modal> -->
        <Receivable :modal="receivablesModal" :pageParams="pageParams"
                    :contractNo="contractNo"
                    :dataDict="dataDict"
                    @closeModal="closeReceivablesModal"/>
        <Modal v-model="anchorInfoModal" :title="anchorInfoModalTitle " :width="800" footer-hide :draggable="true">
            <AnchorInfo ref="affiliatedInfo" :contractNo="contractNo" :dataDict="dataDict"/>
        </Modal>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";

    import {detail} from "_p/basic/api/contract/contract-detail-inquiry";

    import defineData from "../defineData";
    import {getDictDataList} from "_p/basic/assets/contract/js/utils";

    // 组件 合同信息
    import ContractInfo from "./components/ContractInfo";
    // 用户信息
    import CustomerInfo from "./components/CustomerInfo";
    // 合作伙伴
    import BusinessPartner from "./components/BusinessPartner";
    // 财务信息
    import FinancialInfo from "./components/FinancialInfo";
    // 租金明细
    import RentDetails from "./components/RentDetails";
    // 资产明细
    import AssetDetails from "./components/AssetDetails";
    // 挂靠信息
    import AnchorInfo from "./components/AnchorInfo";
    // 应收 弹窗
    import Receivable from "./components/Receivable";

    export default {
        // 合同明细详情
        name: "ContractInquiryDetial",
        components: {
            ContractInfo,
            CustomerInfo,
            BusinessPartner,
            FinancialInfo,
            RentDetails,
            AssetDetails,
            AnchorInfo,
            Receivable
        },
        data() {
            return {
                anchorInfoModal: false,
                anchorInfoModalTitle: '',
                financeInfo: {},
                pageNo: 1,
                defines: [],
                isSP: false,
                pageParams: null,
                contractNo: "",
                spinShow: false,
                openPanel: [1, 2, 3, 4, 5, 6, 7],
                baseData: {},
                // 渠道类型(channelType) 证件类型(certType) 角色(PersonRoleType) AssetType  yesOrNo
                dicttArr: ["channelType", "repayment", "certType", "PersonRoleType", "AssetType", "yesOrNo", "contractStatus", "accountType", "bankCode", "nationality", "netCarCooperPlat"],
                dataDict: {},
                affiliatedInfoType: "",
                financeInfoType: "",
                receivablesModal: false
            };
        },
        computed: {
            ...mapGetters({userInfo: "userInfo", roleType: "roles"})
        },
        created() {
            this.getParams();
            this.defines.push({id: "defineData", fields: defineData});
            // this.isSP = channelType(this.$route.meta.params);
        },
        mounted() {
            this.init();
            // console.log("userInfo", this.userInfo, this.roleType);
        },
        methods: {
            init() {
                this.getDetial();
                this.getDictDataList();
            },
            // 获取页面参数
            getParams() {
                const pageParams = this.afs.getPageParams(this);
                console.log("页面参数--:", pageParams);
                this.pageParams = pageParams;
                this.contractNo = pageParams.contractNo;
            },
            // 初始数据
            getDetial() {
                detail(this.contractNo).then(res => {
                    if (res.code === "0000" && res.data) {
                        this.baseData = res.data;
                        this.setAnchorInfo(res.data["affiliatedInfo"]);
                        this.setFinancialInfo(res.data["financeInfo"]);
                        let arr = [
                            // "contractInfo",
                            "custInfo",
                            "channelInfo",
                            "affiliatedInfo",
                            "assetsInfo",
                            "rentInfo",
                            "financeInfo"
                        ];
                        //合作伙伴合并到合同信息
                        if (this.$refs["contractInfo"] && res.data["contractInfo"]) {
                            this.$refs["contractInfo"].updateData(Object.assign({}, res.data["contractInfo"], res.data["channelInfo"]));
                        }
                        //  财务信息 需要 贷期 字段
                        if (res.data["financeInfo"] && Array.isArray(res.data["financeInfo"]) && res.data['rentInfo']) {
                            res.data["financeInfo"].forEach(e => e.countTerm1 = res.data['rentInfo'].countTerm)
                        }
                        arr.forEach(ele => {
                            if (this.$refs[ele] && res.data[ele]) {
                                this.$refs[ele].updateData(res.data[ele]);
                            }
                        });
                    }
                });
            },
            setAnchorInfo(data) {
                if (!data) return;
                // COMPANY_AFFILIATED   公司挂靠
                // PERSONAL_AFFILIATED 个人挂靠
                // NETWORK_CAR_AFFILIATED 网约车挂靠
                switch (data.affiliatedType) {
                    case "COMPANY_AFFILIATED":
                        this.affiliatedInfoType = "第三方公司挂靠";
                        // this.formOptions = companyOptions;
                        break;
                    case "PERSONAL_AFFILIATED":
                        this.affiliatedInfoType = "个体工商挂靠";
                        // this.formOptions = personalOptions;c
                        break;
                    case "NETWORK_CAR_AFFILIATED":
                        this.affiliatedInfoType = "网约车挂靠";
                        // this.formOptions = newworkOptions;
                        break;
                    default:
                        this.affiliatedInfoType = "";
                }
            },
            setFinancialInfo(data) {
                if (!data) return;
                switch (data.type) {
                    case "CAR_AMT":
                        this.financeInfoType = "车贷";
                        // this.formOptions = companyOptions;
                        break;
                    case "ADDITIONAL":
                        this.financeInfoType = "附加贷";
                        // this.formOptions = personalOptions;c
                        break;
                    case "hasTotal":
                        this.financeInfoType = "汇总";
                        // this.formOptions = newworkOptions;
                        break;
                    default:
                        this.financeInfoType = "";
                }
            },
            // 数据字典
            getDictDataList() {
                getDictDataList(this.dicttArr).then(res => {
                    console.log('===============', res);
                    this.dataDict = res;
                });
            },
            handleSubmit(name) {
                if (this.readOnly) return;
                this.$refs[name].validate(valid => {
                    console.log(valid);
                });
            },
            toCurrentPeriod(params = {}) {
                params.contractNo = this.contractNo;
                console.log("clcik params", params);
                this.afs.newTab(
                    this,
                    "projects/basic/pages/contract/contract-inquiry/contract-inquiry-detial/page/CurrentPeriod",
                    "当期应收",
                    "ios-add",
                    params,
                    "contact-detial-CurrentPeriod-" + this.pageNo,
                    [],
                    true
                );
                this.pageNo += 1;
            },
            toCollectMoney(params = {}) {
                params.contractNo = this.contractNo;
                params.custName = this.pageParams.custName;
                console.log("clcik params", params);
                this.afs.newTab(
                    this,
                    "projects/basic/pages/contract/contract-inquiry/contract-inquiry-detial/page/CollectMoney",
                    "收款",
                    "ios-add",
                    params,
                    "contact-detial-CollectMoney-" + this.pageNo,
                    [],
                    true
                );
                this.pageNo += 1;
            },
            toLog(params = {}) {
                params.contractNo = this.contractNo;
                console.log("clcik params", params);

                this.afs.newTab(
                    this,
                    "projects/basic/pages/contract/contract-inquiry/contract-inquiry-detial/page/Log",
                    "合同日志",
                    "ios-add",
                    params,
                    "contact-detial-Log-" + this.pageNo,
                    [],
                    true
                );
                this.pageNo += 1;
            },
            toRepaymentSchedule() {
                console.log(this.pageParams, 'pageParams================================')
                this.afs.newTab(
                    this,
                    "projects/basic/pages/contract/contract-inquiry/contract-inquiry-detial/page/RepaymentSchedule",
                    "还款计划表",
                    "ios-add",
                    this.pageParams,
                    "contact-detial-RepaymentSchedule-" + this.pageNo,
                    [],
                    true
                );
                this.pageNo += 1;
            },
            anchorInfoModalOpen() {
                this.anchorInfoModalTitle = `挂靠信息   ${this.baseData.contractInfo.contractNo}`
                this.anchorInfoModal = true;
            },

            anchorInfoModalClose() {
                this.anchorInfoModal = false;
            },
            back() {
                //关闭页面
                this.afs.closeTab(this);
            },
            showSpin() {
                this.spinShow = true;
            },
            closeSpin() {
                this.spinShow = false;
            },
            openReceivablesModal() {
                this.receivablesModal = true;
            },
            closeReceivablesModal() {
                this.receivablesModal = false;
            },
            openNewTab(name) {
                console.log(name);
                if (typeof name === "string" && this.$route.name != name) {
                    this.$router.push({
                        name
                    })
                }
            }
        }
    };
</script>
<style lang="less">
    @import "../../../../styles/common/form.less";

    .contract-inquiry-detial {
        .ivu-form-item {
            margin-bottom: 0;
        }

        .contract-detial-btns {
            text-align: center;
            padding: 8px 0;

            button {
                width: 76px;
            }
        }
    }

    .more {
        font-size: 12px;
        color: #fff;
        background: green;
    }

    // .contract-detial-btns {
    //     padding: 8px 0;
    // }
    .contract-inquiry-detial {
        .harf-width {
            height: 100%;
            border-top: none;
            border-bottom: none;

            .ivu-collapse-item {
                height: 100%;
            }
        }
    }
</style>
